<template>
  <ContentWrap
    class="mb-0!"
    :class="[
      footer
        ? '!h-[calc(100vh-var(--top-tool-height)-var(--tags-view-height)-var(--app-footer-height)-10px)]'
        : '!h-[calc(100vh-var(--top-tool-height)-var(--tags-view-height)-20px)]'
    ]"
    :bodyStyle="{ height: '100%', padding: '10px' }"
  >
    <div class="flex flex-col !h-full justify-between">
      <el-scrollbar viewClass="flex-grow ">
        <el-row>
          <el-col :span="24">
            <div class="custom-text-18 mb-10px"> 销售人 </div>
          </el-col>
          <el-divider border-style="dashed" class="mb-10px! mt-10px!" />
          <el-popover
            placement="top-start"
            title="销售人"
            :width="200"
            trigger="hover"
            :content="cartEmployeeText"
          >
            <template #reference>
              <div class="custom-text-16">
                <el-text line-clamp="1"> {{ cartEmployeeText }} </el-text>
              </div>
            </template>
          </el-popover>

          <el-divider border-style="dashed" class="mb-10px! mt-10px!" />
        </el-row>
        <el-row>
          <el-col :span="24">
            <div class="custom-text-18"> 结算 </div>
          </el-col>
          <el-divider border-style="dashed" class="mb-10px! mt-10px!" />
        </el-row>
        <el-row>
          <el-col :span="24">
            <div class="flex justify-between custom-text-16">
              <div> 订单金额 </div>
              <div> ￥{{ fenToYuan(orderInfo.price.totalPrice) }} </div>
            </div>
          </el-col>
          <el-divider border-style="dashed" class="mb-10px! mt-10px!" />
        </el-row>
        <!-- 订单优惠 -->
        <el-row v-if="orderInfo.price.givePrice > 0">
          <el-col :span="24">
            <div class="flex justify-between custom-text-16">
              <div> 订单优惠 </div>
              <div> ￥{{ fenToYuan(orderInfo.price.givePrice) }} </div>
            </div>
          </el-col>
          <el-divider border-style="dashed" class="mb-10px! mt-10px!" />
        </el-row>
        <el-row
          v-for="(item, index) in getPayMentList(orderInfo.price.payMentList, 1)"
          :key="index"
        >
          <el-col :span="24">
            <div class="flex justify-between custom-text-14">
              <div> {{ item.classifyName }} </div>
              <div> <span>￥</span>{{ fenToYuan(item.balance) }} </div>
            </div>
          </el-col>
          <el-divider border-style="dashed" class="mb-10px! mt-10px!" />
        </el-row>

        <!-- 会员优惠 -->
        <!-- <el-row v-if="orderInfo.price.vipPrice > 0">
          <el-col :span="24">
            <div class="flex justify-between custom-text-16">
              <div> 会员优惠 </div>
              <div> ￥{{ fenToYuan(orderInfo.price.vipPrice) }} </div>
            </div>
          </el-col>
          <el-divider border-style="dashed" class="mb-10px! mt-10px!" />
        </el-row> -->
        <!-- 会员优惠 -->
        <!-- <el-row v-if="orderInfo.price.walletPrice > 0">
          <el-col :span="24">
            <div class="flex justify-between custom-text-16">
              <div> 会员余额 </div>
              <div> ￥{{ fenToYuan(orderInfo.price.walletPrice) }} </div>
            </div>
          </el-col>
          <el-divider border-style="dashed" class="mb-10px! mt-10px!" />
        </el-row> -->
        <!-- 会员优惠 -->
        <!-- <el-row v-if="orderInfo.price.ppcPrice > 0">
          <el-col :span="24">
            <div class="flex justify-between custom-text-14">
              <div> 储值卡 </div>
              <div> ￥{{ fenToYuan(orderInfo.price.ppcPrice) }} </div>
            </div>
          </el-col>
          <el-divider border-style="dashed" class="mb-10px! mt-10px!" />
        </el-row>
        <el-row v-if="orderInfo.price.cartPrice > 0">
          <el-col :span="24">
            <div class="flex justify-between custom-text-14">
              <div> 资产换购 </div>
              <div> ￥{{ fenToYuan(orderInfo.price.cartPrice) }} </div>
            </div>
          </el-col>
          <el-divider border-style="dashed" class="mb-10px! mt-10px!" />
        </el-row>
        <el-row v-if="orderInfo.price.assetPrice > 0">
          <el-col :span="24">
            <div class="flex justify-between custom-text-14">
              <div> 资产抵扣 </div>
              <div> ￥{{ fenToYuan(orderInfo.price.assetPrice) }} </div>
            </div>
          </el-col>
          <el-divider border-style="dashed" class="mb-10px! mt-10px!" />
        </el-row>
        <el-row v-if="orderInfo.price.changePrice > 0">
          <el-col :span="24">
            <div class="flex justify-between custom-text-14">
              <div> 改价 </div>
              <div> ￥{{ fenToYuan(orderInfo.price.changePrice) }} </div>
            </div>
          </el-col>
          <el-divider border-style="dashed" class="mb-10px! mt-10px!" />
        </el-row>
        <el-row v-if="orderInfo.price.salesPrice > 0">
          <el-col :span="24">
            <div class="flex justify-between custom-text-14">
              <div> 赠送优惠 </div>
              <div> ￥{{ fenToYuan(orderInfo.price.salesPrice) }} </div>
            </div>
          </el-col>
          <el-divider border-style="dashed" class="mb-10px! mt-10px!" />
        </el-row> -->
        <!-- 积分支付 -->
        <!-- <el-row v-if="orderInfo.price.pointPrice > 0">
          <el-col :span="24">
            <div class="flex justify-between custom-text-16">
              <div> 积分支付 </div>
              <div> ￥{{ fenToYuan(orderInfo.price.pointPrice) }} </div>
            </div>
          </el-col>
          <el-divider border-style="dashed" class="mb-10px! mt-10px!" />
        </el-row> -->
        <!-- <el-row v-if="orderInfo.price.givePrice > 0">
          <el-col :span="24">
            <div class="flex justify-between custom-text-16">
              <div> 订单优惠 </div>
              <div> ￥{{ fenToYuan(orderInfo.price.givePrice) }} </div>
            </div>
          </el-col>
          <el-divider border-style="dashed" class="mb-10px! mt-10px!" />
        </el-row> -->
        <el-row
          v-for="(item, index) in getPayMentList(orderInfo.price.payMentList, 0)"
          :key="index"
        >
          <el-col :span="24">
            <div class="flex justify-between custom-text-16">
              <div> {{ item.classifyName }} </div>
              <div> <span>￥</span>{{ fenToYuan(item.balance) }} </div>
            </div>
          </el-col>
          <el-divider border-style="dashed" class="mb-10px! mt-10px!" />
        </el-row>

        <!-- <el-row v-for="(item, index) in orderInfo.pay" :key="index">
          <el-col :span="24">
            <div class="flex justify-between custom-text-16">
              <div> {{ item.classifyName }} </div>
              <div> <span>￥</span>{{ fenToYuan(item.paybalance) }} </div>
            </div>
          </el-col>
          <el-divider border-style="dashed" class="mb-10px! mt-10px!" />
        </el-row> -->

        <el-row class="pos-sticky bottom-0">
          <el-col :span="24">
            <div class="flex justify-between custom-text-16">
              <div> 待支付金额 </div>
              <div class="c-[var(--el-color-primary)] custom-text-18">
                <span>￥</span>{{ fenToYuan(orderInfo.price.payPrice) }}
                <!--                   v-hasPermi="['shop:sales:price:change']"
 -->
                <Icon
                  icon="ep:edit-pen"
                  v-if="isChangePrice"
                  class="cursor-pointer"
                  @click="handleChangePrice"
                />
              </div>
            </div>
          </el-col>
          <el-divider border-style="dashed" class="mb-10px! mt-10px!" />
        </el-row>
      </el-scrollbar>
      <div class="flex justify-end">
        <slot name="button"></slot>
      </div>
    </div>
  </ContentWrap>
</template>
<script setup lang="ts" name="orderInfo">
/** 购物车信息 */
import { useShopCartStoreWithOut } from '@/store/modules/shop/cart'
import { propTypes } from '@/utils/propTypes'
const shopCartStore = useShopCartStoreWithOut()
import { fenToYuan } from '@/utils'
import { useAppStore } from '@/store/modules/app'
import { isEmpty } from '@/utils/is'
const appStore = useAppStore()
const footer = computed(() => appStore.getFooter)
/**
 *
 * @param paymentlist 支付列表
 * @param type  0 支付 1 优惠
 */
const getPayMentList = (paymentlist, type) => {
  if (isEmpty(paymentlist)) {
    return []
  }
  return paymentlist.filter((ele) => {
    return ele.classSubType == type
  })
}
defineProps({
  cartEmployeeText: propTypes.string.def(''),
  orderInfo: propTypes.object,
  isChangePrice: propTypes.any
})
const emit = defineEmits(['changePrice'])
const handleChangePrice = () => {
  emit('changePrice')
}
</script>
